<script setup>
import { onMounted, ref, defineEmits, watch } from 'vue'

const props = defineProps({
  showTempBT: Boolean,
  tishixinxi: String
})
const regcode = ref('')
const regstatus = ref('')
const emits = defineEmits(['lsHide'])
function reloadApp() {
  window.main2render.send('renderer-register', regcode.value)
}
function linshiHide(){
  emits('lsHide')
}
onMounted(() => {
  
  window.main2render.receive('update-regstatus', (data) => {
    regstatus.value = data.message
    setTimeout(() => {
      regstatus.value = ''
    }, 5000)
  })
})
watch(props, () => {
  console.log('更新了props:')
  
})
</script>
<template>
  <div class="reg_container">
    <p id="wenzi">{{ props.tishixinxi }}</p>
    <input id="regcode_input" v-model.lazy="regcode" type="text" />
    <div id="regcode_status">{{ regstatus }}</div>
    <div class="bts_con">
      <div id="anzc" class="anbt" @click="reloadApp">注册</div>
      <div v-if="props.showTempBT" id="anlsyc" class="anbt" @click="linshiHide">临时隐藏</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.reg_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  #wenzi {
    color: red;
    margin-bottom: 3rem;
    z-index: 2;
  }
  #regcode_input {
    width: 90%;
    height: 5rem;
    font-size: 3rem;
  }
  #regcode_status {
    font-size: 3rem;
    height: 4rem;
    color: red;
  }
  .bts_con {
    width: 100%;
    height: fit-content;
    display: flex;
    margin-top: 3rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    border: 0px solid red;
    .anbt {
      width: fit-content;
      height: fit-content;
      margin: 0 2rem;
      padding: 0 2rem;
      text-align: center;
      font-size: 3rem;
      color: greenyellow;
      background-color: white;
      border-radius: 0.5rem;
      z-index: 4;
    }
  }
}
</style>
